<template>
  <div>
    <el-descriptions>
      <el-descriptions-item label="数据时间">{{ formData.dataStartTime }} ~ {{ formData.dataEndTime }}
      </el-descriptions-item>
      <el-descriptions-item label="活动名称">{{ formData.activityName }}</el-descriptions-item>
      <el-descriptions-item label="碳排放总量（kgCO2）">
        {{ formData.totalCarbonEmissionsValue }}
      </el-descriptions-item>
    </el-descriptions>
    <div v-if="formData.activityType === '1'">
      <h3>能耗碳排</h3>
      <el-table :data="formData.detailList">
        <el-table-column label="所属项目">
          <template #default="{row}">{{ formData.projectName }}</template>
        </el-table-column>
        <el-table-column label="所属场景">
          <template #default="{row}">{{ formData.sceneInfoName }}</template>
        </el-table-column>
        <el-table-column label="能源种类">
          <template #default="{row}">
            {{ energyConsumptionTypeList.find(item => item.id === row.energyConsumptionType).label }}
          </template>
        </el-table-column>
        <el-table-column prop="usageValue" label="用量"></el-table-column>
        <el-table-column label="单位">
          <template #default="{row}">
            {{ energyConsumptionTypeList.find(item => item.id === row.energyConsumptionType).baseObj.energyUnit }}
          </template>
        </el-table-column>
        <el-table-column prop="carbonEmission" label="碳排放量（kgCO2）"></el-table-column>
      </el-table>
    </div>
    <div v-if="formData.activityType === '2'">
      <h3>碳抵消</h3>
      <el-table :data="formData.detailList">
        <el-table-column label="所属项目">
          <template #default="{row}">{{ formData.projectName }}</template>
        </el-table-column>
        <el-table-column label="所属场景">
          <template #default="{row}">{{ formData.sceneInfoName }}</template>
        </el-table-column>
        <el-table-column label="能源种类">
          <template #default="{row}">
            {{ energyConsumptionTypeList.find(item => item.id === row.energyConsumptionType).label }}
          </template>
        </el-table-column>
        <el-table-column prop="usageValue" label="用量"></el-table-column>
        <el-table-column label="单位">
          <template #default="{row}">
            {{ energyConsumptionTypeList.find(item => item.id === row.energyConsumptionType).baseObj.energyUnit }}
          </template>
        </el-table-column>
        <el-table-column label="面积">
          <template #default="{row}">{{ formData.area }}</template>
        </el-table-column>
        <el-table-column prop="carbonEmission" label="碳排放量（kgCO2）"></el-table-column>
      </el-table>
      <h3>购入碳汇</h3>
      <el-table :data="carbonSinkList">
        <el-table-column label="所属项目">
          <template #default="{row}">{{ formData.projectName }}</template>
        </el-table-column>
        <el-table-column label="所属场景">
          <template #default="{row}">{{ formData.sceneInfoName }}</template>
        </el-table-column>
        <el-table-column label="碳汇量（kgCO2">
          <template #default="{row}">{{ row.outsourcedCarbonSinks }}</template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { dictMixin } from '@/mixin/dict'
import api from '@/api/apis/sceneRoom'
import { parseSceneData } from '@/utils/scene-data'

export default {
  name: 'DataFillingDetail',
  mixins: [dictMixin],
  props: {
    // 请求参数
    requestParams: {
      type: Object,
      default: () => ({})
    },
    // 弹窗数据
    popData: {
      type: Object,
      default: () => ({})
    },
    // 弹窗配置
    popConfig: {
      type: Object,
      default: () => ({})
    },
    // 弹窗取消
    close: {
      type: Boolean,
      default: false
    },
    // 弹窗确认
    confirm: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      formData: {
        detailList: []
      },
      energyConsumptionTypeList: [],
      carbonSinkList: []
    }
  },
  watch: {
    popData: {
      async handler(data) {
        const res = await this.$api.commonSelected({
          code: 'EnergyConsumptionTypeSelected'
        })
        this.energyConsumptionTypeList = res.data
        const detailResp = await this.$api.dataFilling.detail(data.dataFillingId)
        this.formData = detailResp.data
        this.formData.activityName = data.activityName
        this.formData.projectName = data.projectName
        this.formData.detailList = JSON.parse(detailResp.data.detailJson)
        console.log(data, detailResp.data)
        if (this.formData.activityType === '2') {
          this.carbonSinkList = [{ outsourcedCarbonSinks: this.formData.outsourcedCarbonSinks }]
        } else {
          this.carbonSinkList = []
        }
      },
      deep: true,
      immediate: true
    },
    confirm() {

    }
  }
}
</script>
